---
title: Heading
description: Heading renders semantic section heading text representing six levels.
themeSource: packages/ui/src/theme/tokens/components/heading.ts
reactSource: packages/react/src/primitives/Heading/Heading.tsx
mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
htmlElement: h1-h6
supportedFrameworks: react
---

import { Fragment } from '@/components/Fragment';
import { PageTabLayout } from '@/components/Layout/PageTabLayout';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
import data from '@/data/props-table.json';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<PageTabLayout 
  tabComponents={[{
    title: "Documentation", 
    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
  },
  {
    title: "Props", 
    children: <PropsTableTab 
                componentName={frontmatter.title} 
                PropsData={data} 
                htmlElement={frontmatter.htmlElement} 
                mdnUrl={frontmatter.mdnUrl}
              />
  }]}
/>